<template>
  <div>
      <div class="box">
     <nav-list></nav-list>
     <nav-right></nav-right>
     <div class="right">
       <div class="d1" >
         <img v-if="isLogin" src="/img/s.png" 
          @mouseenter="index(1)">
         <img v-else src="/img/s1.png" alt=""  @mouseleave="index(2)">
       </div>
    
       <div class="d2">
          <router-link to="/cara">
         <img  src="/img/c.png" alt=""  v-if="isLogin1"  @mouseenter="index(9)" >
         <video src="/img/c1.mp4" 
         autoplay width="100%" height="100%"  loop  muted playsinline
         v-else  @mouseleave="index(10)"><img src="" alt=""></video>
          </router-link>
       </div>
      
       <div class="d4">
          <img src="/img/b.png" alt="" v-if="isLogin2"   @mouseenter="index(3)">
          <img src="/img/b1.png" alt="" v-else   @mouseleave="index(4)">
       </div>
       <div class="d5">
          <img src="/img/a.png" alt="" v-if="isLogin3"  @mouseenter="index(5)">
          <img src="/img/a1.png" alt="" v-else  @mouseleave="index(6)">
       </div>
       <div class="d3">
          <img src="/img/e.png" alt="" v-if="isLogin4" @mouseenter="index(7)">
          <img src="/img/e1.png" alt="" v-else   @mouseleave="index(8)">
       </div>
       
     </div>
   </div>
  </div>
</template>
<script>
import navList from '../components/navList.vue';
import navRight from '../components/navRight.vue';

export default {
  components: { navList ,navRight},
  data() {
    return {
       isLogin:true,
      isLogin1:true,
      isLogin2:true,
      isLogin3:true,
      isLogin4:true,
    

    }
  },
  methods:{
    
    index(val){
      if(val==1){
      this.isLogin=false
    }else if(val==2){
      this.isLogin=true
    }
      if(val==3){
      this.isLogin2=false
    }else if(val==4){
      this.isLogin2=true
    }
      if(val==5){
      this.isLogin3=false     
    }else if(val==6){
      this.isLogin3=true   
    }
      if(val==7){
      this.isLogin4=false
    }else if(val==8){
      this.isLogin4=true    
    }
      if(val==9){
      this.isLogin1=false
    }else if(val==10){
      this.isLogin1=true
    }
  },
  
 }
  
}
</script>
<style  >


  /*背景颜色为黑色 */
 /* body{background-color: rgb(0,0,0);}  */
.box{
width: 1900px;
height: 800px;
margin: 0 auto;}
/* 导航栏 */

.right{
  overflow: hidden;
  margin: 0 auto;
  position: relative;
}
.right>div{
  float: left;
}
.d1{
  width:700px;
  height: 450px;
  
}
.d2{
  width:900px;
  height: 350px;
  
}
.d4,.d5{
  width: 450px;
  height: 450px;
  background-color: darkcyan;
}
.d3{width: 700px;height: 350px;
  position: absolute;
  left: 0;
  top: 450px 
}

 .right img{
 width: 100%;
 height: 100%;
}
</style>